<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop" style="text-align:left">
          <table style="width:100%" class="QueryTable">
              <tr>
                  <td>
                      <div @click="timeChange" style="text-decoration:underline;cursor: pointer">
                          {{ timetitle }}
                      </div>
                  </td>
                  <td>
                      <div v-if="timeflag">
                          <el-date-picker v-model="datetime1" type="month" placeholder="质控月份" size="mini" value-format="yyyy-MM-01 00:00:00" @change="QueryBatchData" :clearable="false"></el-date-picker>
                      </div>
                      <div v-else style="width: 230px">
                          <el-date-picker v-model="datetime1" placeholder="质控日期" size="mini" value-format="yyyy-MM-dd 00:00:00" :clearable="false" style="width: 46%"></el-date-picker> -
                          <el-date-picker v-model="datetime2" placeholder="质控日期" size="mini" value-format="yyyy-MM-dd 23:59:59" :clearable="false" style="width: 46%" @change="QueryBatchData()"></el-date-picker>
                      </div>
                  </td>
                  <td style="text-align:center">累计标志</td>
                  <td>
                      <el-select v-model="inuseflag" placeholder="请选择" style="width:100px">
                          <el-option key="-1" label="全部" value="-1"></el-option>
                          <el-option key="1" label="累计" value="1"></el-option>
                          <el-option key="0" label="不累计" value="0"></el-option>
                      </el-select>
                  </td>
                  <td style="text-align:center">审核标志</td>
                  <td>
                      <el-select v-model="checkflag" placeholder="请选择" style="width:100px">
                          <el-option key="-1" label="全部" value="-1"></el-option>
                          <el-option key="1" label="审核" value="1"></el-option>
                          <el-option key="0" label="不审核" value="0"></el-option>
                      </el-select>
                  </td>
                  <td style="text-align:center">显示点</td>
                  <td>
                      <el-select v-model="gtype" placeholder="请选择" style="width:100px">
                          <el-option key="-1" label="所有点" value="-1"></el-option>
                          <el-option key="1" label="最后点" value="1"></el-option>
                          <el-option key="0" label="最好点" value="0"></el-option>
                      </el-select>
                  </td>

                  <td :colspan="7" style="text-align:right;width:360px;padding-right:5px">
                      <el-button @click="QueryData('','query')" type="primary" icon="el-icon-search">查询</el-button>
                      <el-button @click="QueryData('','print')" icon="el-icon-printer">打印</el-button>
                      <el-button @click="QueryData('','design')" icon="el-icon-setting">样式调整</el-button>
                      <el-button @click="ExportFile()" icon="el-icon-document">导出</el-button>
                  </td>
              </tr>
              <tr>
                  <td>质控仪器</td>
                  <td>
                      <rm-ddl-instrument @change="instrChange" v-model="instrid" defaultflag="1" width="230px" prgno="LIS540" :clearable="false"></rm-ddl-instrument>
                  </td>
                  <td style="text-align:center">参与画图</td>
                  <td>
                      <el-select v-model="drawflag" placeholder="请选择" style="width:100px">
                          <el-option key="-1" label="全部" value="-1"></el-option>
                          <el-option key="1" label="画图" value="1"></el-option>
                          <el-option key="0" label="不画图" value="0"></el-option>
                      </el-select>
                      <!-- <el-radio-group v-model="drawflag">
                          <el-radio label="-1">全部</el-radio>
                          <el-radio label="1">画图</el-radio>
                          <el-radio label="0">不画图</el-radio>
                      </el-radio-group> -->
                  </td>
                  <td style="text-align:center">失控标志</td>
                  <td>
                      <el-select v-model="controlstatus" placeholder="请选择" style="width:100px">
                          <el-option key="-1" label="全部" value="-1"></el-option>
                          <el-option key="1" label="在控" value="1"></el-option>
                          <el-option key="0" label="失控" value="0"></el-option>
                          <el-option key="" label="未判定" value=""></el-option>
                      </el-select>
                  </td>
                  <td style="text-align:left;font-size:400" :colspan="3">
                      <el-checkbox v-model="showallbatch" true-label="1" false-label="0" @change="QueryBatchData()">显示所有批号</el-checkbox>
                         <el-checkbox style=" padding: 0px 0px 0px 0px" v-model="bCalc1">每日数据仅显示一次</el-checkbox>
                  </td>
                  <td  :colspan="2">
                      <a  v-if="bCalc1">显示第<el-input-number  v-model="calcdaynum" controls-position="right" :min="1" :max="99" style="width:80px"></el-input-number>次数据</a>
                  </td>
              </tr>
          </table>
      </div>
      <div class="pagecenter">
          <div class="middle-left">
              <vxe-table show-overflow ref="xTable1" height="100%" :data.sync="tableData" @current-change="currentchangeEvent" border size="mini" show-header-overflow highlight-current-row highlight-hover-row show-footer resizable stripe>
                  <vxe-table-column field="batchno" title="批号" width="100px" header-align="center"></vxe-table-column>
                  <vxe-table-column field="qclevel" title="水平" width="60px" header-align="center" align="center"></vxe-table-column>
                  <vxe-table-column field="startdt" title="启用日期" width="120px" :formatter="['toDateString', 'yyyy-MM-dd']" header-align="center" align="center"></vxe-table-column>
                  <vxe-table-column field="instrname" title="质控仪器" width="120px" header-align="center"></vxe-table-column>
                  <vxe-table-column field="qcid" title="qcid" width="120px" header-align="center"></vxe-table-column>
                  <vxe-table-column field="expriedt" title="有效期" width="120px" :formatter="['toDateString', 'yyyy-MM-dd']" header-align="center" align="center"></vxe-table-column>
                  <vxe-table-column field="stopdt" title="停用日期" width="120px" :formatter="['toDateString', 'yyyy-MM-dd']" header-align="center" align="center"></vxe-table-column>
              </vxe-table>
          </div>
          <div class="middle-center">
              <vxe-table :data="tableData1" :loading="loading" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row highlight-hover-column ref="xTable2" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" width="100%" stripe :key="xtable2key">
                  <vxe-table-column :field="item.field" :title="item.title" :key="item.field"  :fixed="item.fixed" :width="item.width" header-align="center" v-for="(item, index) in tableColumns" align="center">
                      <template v-slot="{ row }">
                          <el-tooltip placement="bottom" effect="light" v-if="row.hasOwnProperty('flag_' + index) && row['flag_' + index]">
                              <div slot="content" v-html="DealStr(row['flag_' + index])"></div>
                              <div style="font-weight: bold">{{ row[item.field] }}</div>
                          </el-tooltip>
                          <div v-else>{{ row[item.field] }}</div>
                      </template>
                  </vxe-table-column>
              </vxe-table>
          </div>
      </div>
  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils"; //引入工具类
export default {
  name: "LIS540",
  data() {
      return {
          xtable2key: 0,
          devtype: "",
          typeOptions: [],
          timetitle: "质控月份",
          timeflag: true,
          datetime1: "", //质控月份
          datetime2: "", //质控结束时间
          instrid: "", //仪器ID
          inuseflag: "-1", //累计标志
          checkflag: "-1", //审核标志
          drawflag: "-1", //画图标志
          controlstatus: "-1", //失控标志
          gtype: "-1", //显示点
          tableData: [], //左边批号数据
          showallbatch: "0", //显示所有批号
          tableColumns: [], //
          tableData1: [],
          loading: false, //加载标志
          userno: this.$tool.getSession(this.$tool.loginuserno),
          bCalc1: false, 
          calcdaynum: 1, //显示第几次
          instrname: "",
          selrow: {},
      };
  },
  created() {
      this.InitPageDate(); //初始化主列表
  },
  mounted() {},
  updated() {},
  methods: {
      //页面初始化加载
      InitPageDate() {
          this.datetime1 = XEUtils.toDateString(new Date(), "yyyy-MM-01 00:00:00");
          this.datetime2 = XEUtils.toDateString(new Date(), "yyyy-MM-dd 23:59:59");
      },
      //表格方法
      currentchangeEvent({ row, column }) {
          this.QueryData(row, "query");
      },
      //后台交互方法\
      //查询选中批号的所有质控数据
      QueryData(row, type) {
          if (!row) row = this.$refs.xTable1.getCurrentRow();
          if (!row) return;
          if (!this.timeflag && (type == "print" || type == "design")) {
              this.$message.error("当前查询时间区间为日期，请在质控月份查询下进行此操作。");
              return;
          }
          this.selrow = row;
          this.loading = true;
          this.$tool
              .request({
                  url: "LIS/LIS5/LIS540",
                  method: "post",
                  data: {
                      action: "queryqcdata",
                      instrid: this.instrid,
                      controlstatus: this.controlstatus,
                      gtype: this.gtype,
                      checkflag: this.checkflag,
                      inuseflag: this.inuseflag,
                      drawflag: this.drawflag,
                      batchno: row.batchno,
                      qclevel: row.qclevel,
                      datetime1: this.datetime1,
                      bCalc1: this.bCalc1 ? "1" : "0", 
                      calcdaynum: this.calcdaynum,
                      datetime2: this.timeflag ? "" : this.datetime2,
                      type: type,
                  },
              })
              .then((res) => {
                  if (!!res.Data) {
                      this.tableData1 = [];
                      this.tableColumns = [{ field: "colname", title: "", width: "70px",fixed:"left"}];
                      var arr = [res.Data[1]["col_1"], res.Data[0]["col_1"]];
                      let ss = this.$pub.getStringWidth(arr, 10, 40);
                      var colcount = 16;
                      if (res.length) colcount = res.length - 0;
                      for (let i = 1; i <= colcount; i++) {
                          var fieldnamearr = res.Data[0]["col_" + i].split("|");
                          this.tableColumns.push({ field: "col_" + i, title: fieldnamearr[0], width: ss + "px" });
                      }
                      for (let i = 1; i < res.Data.length; i++) {
                          this.tableData1.push(res.Data[i]);
                      }
                      this.loading = false;
                      // if(type == "print") this.$pub.printCustomXml(res.print,'900','admin','');
                      if (type == "print" || type == "design") {
                          var columns = [];
                          for (let i = 0; i < 13; i++) {
                              if (i == 0) columns.push({ title: "colname", property: "colname" });
                              else columns.push({ title: "col" + i, property: "col" + i });
                          }
                          columns.push({ title: "质控时间", property: "qcmonth" });
                          columns.push({ title: "仪器", property: "instrname" });
                          columns.push({ title: "批号", property: "batchno"});
                          columns.push({ title: "水平", property: "qclevel"});
                          columns.push({ title: "总结", property: "summary"});
                          columns.push({ title: "主管意见", property: "manager_note"});
                          //let column = this.$refs.xTable2.getTableColumn().tableColumn;
                          //let str = JSON.stringify(this.$pub.InitColumn(column));
                          let str = JSON.stringify(columns);
                          str += "\r";
                          str += JSON.stringify(res.print);
                          let sql = btoa(encodeURIComponent(str));
                          if (type == "design") jsObj.SetCustomJsonPrintConfig("5041", sql, this.userno, "质控月汇总表 ");
                          else if (type == "print") jsObj.PrintCustomJsonReport("5041", sql, this.userno, "质控月汇总表 ", "");
                      }
                      // this.$pub.designCustomXml(res.print, "6010", "admin", "LIS540");
                  } else {
                      this.loading = false;
                  }
              })
              .catch(() => {
                  this.loading = false;
              });
      },
      //查询批号和水平
      QueryBatchData() {
          this.$tool
              .request({
                  url: "LIS/LIS5/LIS540",
                  method: "post",
                  data: {
                      action: "querybacthdata",
                      instrid: this.instrid,
                      showallbatch: this.showallbatch,
                      datetime1: this.datetime1,
                  },
              })
              .then((res) => {
                  if (res) {
                      this.tableData = res.data;
                      this.QueryData(this.tableData[0], "query");
                      this.$refs.xTable1.setCurrentRow(this.tableData[0]);
                  } else {
                  }
              });
      },
      //质控数据的处理
      DealQcData(data, rptlist) {
          this.tableData1 = [{ colname: "批号" }, { colname: "DV" }, { colname: "本月X" }, { colname: "s" }, { colname: "本月s" }, { colname: "cv%" }, { colname: "本月cv%" }];
          this.tableColumns = [{ field: "colname", title: "", width: "80px" }];
          if (rptlist.length > 0) {
              var rptone = data.filter((item) => item.rpt_itemcode == rptlist[0].rpt_itemcode);
              var numall = rptone.length;
              for (let j = 0; j < numall.length; j++) {
                  this.tableData1.push({ colname: j + "" });
              }
              for (let i = 0; i < rptlist.length; i++) {
                  var rptdata = data.filter((item) => item.rpt_itemcode == rptlist[i].rpt_itemcode);
                  let arr = [];
                  arr[0] = rptdata[0].BatchNo;
                  arr[1] = rptlist[i].itemcode_en;
                  let ss = this.$pub.getStringWidth(arr, 14, 60);
                  this.tableColumns.push({ field: rptlist[i].rpt_itemcode, title: rptlist[i].itemcode_en, width: ss + "px" });
                  this.tableData1[0][rptlist[i].rpt_itemcode + ""] = rptdata[0].BatchNo;
                  this.tableData1[1][rptlist[i].rpt_itemcode + ""] = rptdata[0].tagvalue;
                  this.tableData1[3][rptlist[i].rpt_itemcode + ""] = rptdata[0].sd;
                  this.tableData1[5][rptlist[i].rpt_itemcode + ""] = rptdata[0].cv;
                  var numbers = [];
                  for (let f = 0; f < rptdata.length; f++) {
                      numbers.push(rptdata[f].calculatevalue);
                      if (i == 0) {
                          this.tableData1.push({ colname: f + 1 + "" });
                          this.tableData1[f + 7][rptlist[i].rpt_itemcode + ""] = rptdata[f].calculatevalue;
                      } else {
                          this.tableData1[f + 7][rptlist[i].rpt_itemcode + ""] = rptdata[f].calculatevalue;
                      }
                  }
                  var valueresult = this.$pub.stddevp(numbers);
                  this.tableData1[2][rptlist[i].rpt_itemcode + ""] = valueresult.avgValue;
                  this.tableData1[4][rptlist[i].rpt_itemcode + ""] = valueresult.sdValue;
                  this.tableData1[6][rptlist[i].rpt_itemcode + ""] = valueresult.cvValue;
              }
          }
      },
      instrChange(code, name) {
          this.instrid = code;
          this.instrname = name;
          this.QueryBatchData();
      },
      //导出数据
      ExportFile() {
          if (this.tableData1.length > 0) {
              // let tableColumn = this.$refs.xTable2.getColumns();
              let extableColumn = [];
              this.tableColumns.forEach((item) => {
                  extableColumn.push({ title: item.title, field: item.field });
              });
              let filtertxt = this.getExportFilter();
              this.$pub.exportTableExcel(this.tableData1, extableColumn, "LIS540 质控月查询.xlsx", filtertxt);
          } else {
              this.$alert("当前没有数据!", "提示");
          }
      },
      // 获取当前导出文件的所有查询条件
      getExportFilter() {
          let filtertxt = this.timetitle + ":";
          if(this.timeflag) filtertxt += XEUtils.toDateString(this.datetime1, "yyyy-MMd") + "; ";
          else filtertxt += XEUtils.toDateString(this.datetime1, "yyyy-MM-dd HH:mm:ss") + "至" + XEUtils.toDateString(this.datetime2, "yyyy-MM-dd HH:mm:ss") + "; ";
          filtertxt += "累计标志:" + (this.inuseflag == "1" ? "累计" : this.inuseflag == "0" ? "不累计" : "全部") + "; ";
          filtertxt += "审核标志:" + (this.checkflag == "1" ? "审核" : this.checkflag == "0" ? "不审核" : "全部")  + "; ";
          filtertxt += "显示点:" + (this.gtype == "1" ? "最后点" : this.gtype == "0" ? "最好点" : "所有点")  + "; ";
          if(this.instrid) filtertxt += "质控仪器:" + this.instrname + "; ";
          filtertxt += "参与画图:" + (this.drawflag == "1" ? "画图" : this.drawflag == "0" ? "不画图" : "全部")  + "; ";
          filtertxt += "失控标志:" + (this.drawflag == "1" ? "在控" : this.drawflag == "0" ? "失控" : this.drawflag == "-1" ? "全部" : "未判定")  + "; ";
          if(this.showallbatch == "1") filtertxt += "显示所有批号; ";
          if(this.bCalc1) filtertxt += "每日数据仅显示一次; ";
          filtertxt += "当前批号:" + this.selrow.batchno + "; ";
          filtertxt += "当前水平:" + this.selrow.qclevel + "; ";
          filtertxt += "当前质控仪器:" + this.selrow.instrname + "; ";
          return filtertxt;
      },
      timeChange() {
          this.timeflag = !this.timeflag;
          this.timetitle = this.timeflag ? "质控月份" : "质控日期";
          this.tableData = [];
          this.tableData1 = [];
      },
      DealStr(str) {
          let restr = "";
          var regexp = new RegExp("\\|", "g");
          return str.replace(regexp, "<br/>");
      },
  },
};
</script>


<style scoped>
.pagetop {
  left: 0;
  right: 0;
  height: 72px;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  border: solid 1px #ccc;
  position: absolute;
  z-index: 99;
}
.pagecenter {
  position: absolute;
  top: 76px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: hidden;
}
.middle-left {
  position: absolute;
  height: 100%;
  width: 400px;
  left: 0px;
  overflow: hidden;
}
.middle-right {
  position: absolute;
  height: 100%;
  right: 0;
  bottom: 0;
  overflow: visible;
}
.middle-center {
  position: absolute;
  height: 100%;
  left: 405px;
  right: 0;
  overflow: hidden;
}

table tr td:nth-child(1) {
  width: 80px;
}
.QueryTable tr td:nth-child(odd) {
  text-align: right;
  white-space: nowrap;
  font-size: 12px;
  width: 80px;
  font-weight: bold;
}
/deep/.el-input--suffix .el-input__inner {
  padding-right: 10px;
}
</style>